<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>gen qrcode</title>
	<link rel="stylesheet" type="text/css" href="/vendor/bootstrap-css/css/bootstrap.css">
	<script src="/vendor/mootools/dist/mootools-core.js"></script>
	<style>
	</style>
</head>
<body>
	<header>
		<h1 class="text-center">Generate QR</h1>
	</header>
	<div class="container">
		<div class="row">
			<input class="form-control" id="qrcontent" type="text" placeholder="input some text and press enter to go">
		</div>
		<div class="row clearfix">
			<img class="qrcode" >
		</div>
	</div>
	<script type="text/javascript">
		$('qrcontent').addEvent('keydown', function(e){
			if(e.key === 'enter'){
				var content = this.get('value').trim();
				content = encodeURIComponent(content);
				document.getElement('.qrcode')
					.set('src', 
						location.protocol + "//" + location.host + '/bqr/' + content
					);
			}
		});
	</script>
</body>
</html>
